<template>
  <div class="box">
    <div class="card">
      <div class="title">标签类目</div>
      <div class="form-item">
        <el-tag
          v-for="tag in riskAppetite"
          :key="tag.name"
          size="medium"
          effect="plain"
          :type="tag.type">
          {{tag.name}}
        </el-tag>
      </div>
      <div class="form-item">
        <el-tag
          v-for="tag in location"
          :key="tag.name"
          effect="plain"
          :type="tag.type">
          {{tag.name}}
        </el-tag>
      </div>
      <div class="form-item">
        <el-tag
          v-for="tag in industry"
          :key="tag.name"
          effect="plain"
          :type="tag.type">
          {{tag.name}}
        </el-tag>
      </div>
      <div class="form-item">
        <el-tag
          v-for="tag in size"
          :key="tag.name"
          effect="plain"
          :type="tag.type">
          {{tag.name}}
        </el-tag>
      </div>
    </div>
    <div class="card group-detail">
      <!-- 个性化 -->
      <div class="title">个性化</div>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">一天总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">三天总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">十天总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">单月总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">三月总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">六个月总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">今年总手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">一天留存手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">五天留存手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">十天留存手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">双月留存手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">三月留存手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="form-item">
            <label class="label">一年留存手续费</label> 
            <input-number-range></input-number-range>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import InputNumberRange from '@/components/inputNumberRange.vue'
export default {
  data() {
    return {
      riskAppetite: [
        { name: '保守' },
        { name: '极端保守' },
        { name: '稳健' },
        { name: '平衡中立' },
        { name: '积极' }
      ],
      location: [
        { name: '上海' },
        { name: '北京' },
        { name: '香港' },
        { name: '华东' },
        { name: '西南' }
      ],
      industry: [
        { name: '基金' },
        { name: '银行' },
        { name: '券商' },
        { name: '私募' },
        { name: '保险' }
      ],
      size: [
        { name: '微型' },
        { name: '小型' },
        { name: '中型' },
        { name: '大型' },
        { name: '巨大型' }
      ],
      any: [
        { name: '' },
        { name: '' }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      searchInput: "",
      selectValue: "",
      searchList: [
        {
          id: "1",
          name: "侧视1322131",
        },
        {
          id: "2",
          name: "侧视2222222",
        },
        {
          id: "3",
          name: "侧视3333335",
        },
        {
          id: "4",
          name: "侧视4345555",
        },
        {
          id: "5",
          name: "侧视1322131",
        },
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      
    })
  },
  methods: {
    tabFn(i) {
      this.tabIndex = i
    },
  },
  components: {
    InputNumberRange
  }
}
</script>

<style lang="scss" scoped>
.el-tag {
  background-color: transparent;
  border-color: #b3d8ff;
  color: #409eff;
  height: 28px;
  line-height: 26px;
  padding: 0 10px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  width: 120px;
  text-align:center;
}
.el-tag + .el-tag {
  margin-left: 20px;
}
.el-tag--plain {
  background-color: transparent;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-color: #b3d8ff;
  color: #409eff;
  background-color: transparent;
}
.box {
  .el-select-dropdown {
    padding: 10px 0px !important;
  }
  
  .card {
    padding: 10px 10px;
    background-color: #262d47;
    color: #959fc5;
    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .info {
      display: flex;
      padding: 10px 10px;
      .infoItem {
        flex: 1;
        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
  }
  .form-item {
    padding: 5px 10px;
    display: flex;
    .label {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      margin-right: 20px;
      white-space: nowrap;
      word-break: keep-all;
      text-align: center;
      line-height: 30px;
    }
  }
  .group-detail {
    height: 100%;
    margin-top: 10px;
  }
  .btn-group {
    padding: 10px 5px;
  }
  .infoItemLabel {
    margin-right: 10px;
  }
  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
}
</style> 